<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第四轮测试</title>
    <link rel="icon" href="../images/touxiang.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <script src="jQuery.js"></script>
    <script src="formjson.js"></script>
    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }

        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
    </script>
</head>

<body>
    <img src="../images/fantang.png" alt="" id="logo">
    <ul id="navigation">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <center><a href="#">你想看的</a></center>
            <ul>
                <li><a href="../index.html">我的主页</a></li>
                <li><a href="1.html">第一轮测试</a></li>
                <li><a href="2.html">第二轮测试</a></li>
                <li><a href="3-1.html">第三轮测试</a></li>
                <li><a href="4.html">第四轮测试</a></li>
            </ul>
        </li>
    </ul>
    <div id=“container”>
    </div>
    <div id="container">
        <div id="content">
            <div id="begin">
                <h1>第四轮测试</h1><br>
                <h1>您在XX食堂上与其他专家的看法不同，请问有什么问题？<br></h1><br>
                <form id="form">
                <textarea rows="8" cols="100" name="question"></textarea>
    </form>
            </div>
                            <div align="center" id="header">
                    <div id="anniu"><a onclick="submitToNextPage()">完成测试</a></div>
                </div>
        </div>
    </div>
    <script>
        let storageItemName = "nl-formJson";

        $(function () {
            // json信息加载到form表单中
            loadStorageJsonToForm({
                item: storageItemName
            });

            // 定时器显示rang类型字段,实际使用没有此类型值可去除此段代码
            setInterval(function () {
                $("#rate_text").text($(form).find("[name='rate']").val() + "%");
            }, 0.01);
        });

        /** 提交当前页表单，并跳转到下一页 */
        function submitToNextPage() {
            let json = $("#form").serializeJson();
            //console.log(json);
            serialFormJsonToStorage({
                item: storageItemName,
                handle: function (obj) {

                }
            });
            saveFormData();
            window.localStorage.removeItem(storageItemName);
            alert("提交成功");
            window.location = "finish.html";
        }

        /** 提交当前页表单 */
        function submitForm() {
            let json = $("#form").serializeJson();
           // console.log(json);
           // alert("保存成功");
        }
        function saveFormData() {
        json = serialFormJsonToStorage( {item : storageItemName} );
    }
    function submit() {     
        saveFormData();
        // 最后一步提交后需要移除storageItemName,避免影响下一次表单填写的json信息
        window.localStorage.removeItem(storageItemName);
        window.location = "finish.html";
    }
    </script>
</body>

</html>